import React from 'react'
// import { BrowserRouter as Router, Route, Switch, Redirect, } from 'react-router-dom'
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import history from './utils/history'
import AuthRoute from '@/components/AuthRoute'
const Login = React.lazy(() => import('@/pages/Login'))
const Layout = React.lazy(() => import('@/pages/Layout'))
const NotFound = React.lazy(() => import('@/pages/NotFound'))
const Search = React.lazy(() => import('@/pages/Search'));
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'));
const Chat = React.lazy(() => import('@/pages/Profile/Chat'));
const Article = React.lazy(() => import('@/pages/Article'));
const SearchResult = React.lazy(() => import('./pages/Search/Result'))
export default function App() {
  return (
    <>
      <Router history={history}>
        <React.Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Redirect exact from="/" to="/home" />
            <Route path="/login" component={Login} />
            <Route path="/home" component={Layout} />
            <AuthRoute path="/edit" component={ProfileEdit} />
            <Route path="/search" component={Search} />
            <Route path="/article/:id" component={Article} />
            <AuthRoute path="/chat" component={Chat} />
            <Route path='/result' component={SearchResult} />
            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>
    </>
  )
}